<template>
  <view class="feedback">
    <div class="bg-fff font-28 col-333 pd_l_30 pd_r_30 pd_t_20 pd_b_20" style="border-top: 1px solid #f7f7f7">
      <u-input v-model="form.feedBackTitle"  placeholder="请输入标题"/>
    </div>
    <div class="bg-fff font-28 col-333 pd_l_30 pd_r_30 pd_t_20 pd_b_20 mg_t_10">
      <u-input v-model="form.feedBackContent" type="textarea" placeholder="请输入反馈信息" :maxlength="300" :height="160" :clearable="false"/>
      <view style="text-align: right" class="color-333 font-24">{{form.feedBackContent.length || 0}}/300</view>
    </div>

    <div class="bg-fff font-28 col-333 pd_l_30 pd_r_30 pd_t_20 pd_b_20 mg_t_10">
      <u-input v-model="form.feedBackChannel" placeholder="手机/邮箱/QQ(选填)"/>
    </div>

    <div class="pd_t_50 pd_l_30 pd_r_30 u-demo-area">
      <u-upload ref="uUpload" :custom-btn="false" :show-upload-list="true" :action="action" :auto-upload="false" :file-list="fileList"
                :show-progress="false" :deletable="true" :max-count="6"
                @on-choose-complete="onchoosecomplete"
                @on-list-change="onListChange"
                @on-remove="onRemove">
      </u-upload>
    </div>

    <div class="bg-fff btn-container pd_t_19 pd_b_20">
      <u-button type="primary" :custom-style="customStyle" shape="circle" @click="onClickPopupShow">提交</u-button>
    </div>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import {TOAST} from "../../util/util";

  export default {
    data() {
      return {
        customStyle: {
          background: '#1f476d',
          padding: '0 30rpx',
          color: '#fff'
        },
        form: {feedBackContent:''},
        fileList: [],
        lists: [],
        action: '',
        base64Data: []
      }
    },
    methods: {
      onClickPopupShow() {
        if(!this.form.feedBackTitle) {
         TOAST('请输入标题');
          return false;
        }
        if(!this.form.feedBackContent) {
         TOAST('请输入反馈信息');
          return false;
        }
        if(!this.form.feedBackChannel) {
         TOAST('请输入手机/邮箱/QQ');
          return false;
        }
        var base64Data = JSON.parse(JSON.stringify(this.base64Data))
        if (base64Data.length) {
          this.form.feedBackImgs = base64Data.join(',')
        }
        request({
          url: '/app/userCenter/addFeedBack',
          method: 'post',
          data: this.form
        }).then(res => {
          TOAST('反馈成功');
          setTimeout(function(){
            uni.navigateBack()
          },300)
        })
      },

      onListChange(lists) {
        this.lists = lists;
      },

      onchoosecomplete(lists) {
        var that = this
        wx.getFileSystemManager().readFile({
          filePath: lists[lists.length - 1].url,
          encoding: "base64",
          success (res) {
            let base64 = 'data:image/png;base64,' + res.data;
            // 转换完成，开始执行上传
            that.uploadImg(base64)
          }
        })
      },

      uploadImg(base64) {
        request({
          url: '/common/upload/base64',
          data: {
            file: base64
          },
          method: 'post'
        }).then(res => {
          this.base64Data.push(res.msg);
        })
      },

      onRemove(index) {
        this.base64Data.splice(index, 1)
      }
    }
  }
</script>

<style lang="scss">
  .feedback {
    background: #f7f7f7;
    padding-bottom: 120upx;
    height: 100%;
    .btn-container {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding-left: 30upx;
      padding-right: 30upx;
      box-shadow: 1px 8px 16px 0px rgba(0, 0, 0, 0.47);
    }
    .u-demo-area .u-add-wrap {
      background: #fff!important;
    }
  }
</style>
